<template>
<div id="root">
  <h2>今天天气好{{info}}！</h2>
  <button @click="changeWeather">点击切换天气</button>
</div>
</template>

<script>
export default {
  name: "JianShiShuXingDeJiBenYongFa",
  data() {
    return {
      isHot: true,
    }
  },
  computed: {
    info() {
      return this.isHot ? '炎热' : '凉爽'
    }
  },
  methods: {
    changeWeather() {
      this.isHot = !this.isHot
    }
  },
  watch: {
    isHot: {
      immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时
      handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue)
      }
    }
  }
}
</script>

<style scoped>

</style>
